<template>
  <div class="home">
    <div class="home_box">
      <div
        class="banner"
        :style="{
          backgroundImage: `url(${shop.backgroundImage})`,
          backgroundSize: 'cover',
          backgroundPosition: 'center',
        }"
      >
        <div class="banner_info">
<!--          <img-->
<!--            class="product_img"-->
<!--            style="width: 150px"-->
<!--            :src="'http://localhost:3100/js' + item.image.split(',')[0]"-->
<!--            alt=""-->
<!--          />-->
          <div class="banner_tit">{{shop.name}}</div>
          <div class="banner_price">品牌名称：{{shop.brand}}</div>
          <div class="banner_price">市场价：￥{{shop.marketPrice}}</div>
          <a-button type="primary" @click="toProductDetail(shop.id)"> 查看详情 </a-button>
        </div>
      </div>
      <div class="shop_box">
        <div class="shop_head">
          <div class="shop_tit">各种电器</div>
          <div class="shop_more" @click="toProductDetail0"
            >查看更多
            <Icon class="ml-2" icon="ant-design:right-outlined" />
          </div>
        </div>
        <div class="shop_list">
          <Row :gutter="[36, 24]">
            <Col :span="6" v-for="(item, index) in shopList" :key="index">
              <Card hoverable @click="toProductDetail(item.id)">
                <template #cover>
                  <img class="p-3" alt="暂无图片" :src="'http://localhost:3100/js' + item.image.split(',')[0]" />
                </template>
                <CardMeta>
                  <template #title>
                    <div class="item_tit">
                      <span class="item_price">￥</span>{{ item.marketPrice }}
                    </div>
                  </template>
                  <template #description>
                    <div>
                      <div>名称：{{ item.name }}</div>
                      <div>品牌：{{ item.brand }}</div>
                    </div>
                  </template>
                </CardMeta>
              </Card>
            </Col>
          </Row>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup name="ViewsClientIndex">
  import { ref, onMounted } from 'vue';
  import { Row, Col, Card, CardMeta } from 'ant-design-vue';
  import { Icon } from '/@/components/Icon';
  import { router } from '/@/router/index';
  import { jydqProductListData } from '/@/api/jydq/jydqProduct';

  const shopList = ref([
    // 商品列表
    /*{
      id: 1,
      name: '冰箱',
      image:
        'https://img1.360buyimg.com/n6/jfs/t1/270764/40/7139/167658/67dbe9bcF7a0600b0/33207159be5f3a89.jpg',
      marketPrice: '300',
      brand: '格力',
    },*/
  ]);
  const shop = ref({});
  onMounted(async () => {
    const res = await jydqProductListData();
    shopList.value = res.list;
    shop.value = res.list[0];
    shop.value.backgroundImage =
      'http://localhost:3100/js' + shop.value.image.split(',')[0] ||
      'https://5b0988e595225.cdn.sohucs.com/images/20181011/3612bdf416284e8d9893a25d7c487cff.jpeg';
  });

  const toProductDetail0 = () => {
    router.push({ path: '/client/productDetail', query: { key: '2' } });
  };

  const toProductDetail = (value: string) => {
    router.push({ path: '/client/productDetail1', query: { key: '', value: value } });
  };
</script>
<style scoped lang="less">
  .home {
    padding: 0 16vw;
    .home_box {
      min-height: 70vh;
      padding: 16px;
      background: #fff;
      box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1), 0 6px 4px 0 rgba(0, 0, 0, 0.1);
      .banner {
        height: 50vh;
        background: #153e70;
        background: url('https://5b0988e595225.cdn.sohucs.com/images/20181011/3612bdf416284e8d9893a25d7c487cff.jpeg');
        background-size: cover;
        position: relative;
        .banner_info {
          position: absolute;
          top: 42%;
          left: 4%;
          color: #fff;
          .banner_tit {
            font-size: 28px;
            font-weight: bold;
            margin-bottom: 16px;
          }
          .banner_price {
            margin-bottom: 6px;
          }
        }
      }
      .shop_box {
        width: 100%;
        margin: 36px 0;
        padding: 0 16px;
        .shop_head {
          display: flex;
          justify-content: space-between;
          align-content: center;
          .shop_tit {
            font-size: 22px;
            font-weight: bolder;
          }
          .shop_more {
            color: #999;
          }
        }
        .shop_list {
          .ant-card {
            height: 350px; // 统一基础高度
            display: flex;
            flex-direction: column;
          }
          .ant-card-cover img {
            max-height: 200px; // 根据设计需求调整
            object-fit: cover; // 保持比例裁剪
            width: 100%;
          }
          padding-top: 16px;
          .item_tit {
            font-size: 20px;
            .item_price {
              font-size: 14px;
            }
          }
        }
      }
    }
  }
</style>
